<template>
<!-- 卡片 -->
<el-row class="good-item">
  <el-col>
    <el-card :body-style="{padding: 0}">
      <div class="good-img">
        <a>
          <img :src="goods.productImageBig" alt>
        </a>
      </div>
      <h6 class="good-title">{{goods.productName}}</h6>
      <h3 class="sub-title ellipsis">{{goods.subTitle}}</h3>
      <div class="good-price pr">
        <div class="ds pa">
          <a href>
            <el-button type="default" size="medium" @click="productDetail(goods.productId)">查看详情</el-button>
          </a>
          <a href>
            <el-button type="primary" size="medium" @click.prevent="addshopping">加入购物车</el-button>
          </a>
        </div>
        <p>
          <span style="font-size:14px">¥</span>
          {{Number(goods.salePrice).toFixed(2)}}
        </p>
      </div>
    </el-card>
  </el-col>
</el-row>
</template>

<script>
import qs from 'qs'
export default {
  // props接收传过来的值
  props: ['goods'],
  methods: {
    // 路由跳转
    productDetail(id) {
      this.$router.push({
        // 带参一定 ` `
        path: `goodsDetail?productId=${id}`
      })
    },
    // 添加购物车
    addshopping() {
      // 把id取出来
      let id = this.goods.productId
      //console.log(id)
      // element ui 中的message弹窗组件，在plugins中引入
      this.$message({
        message: "添加购物车成功！",
        type: "success"
      });
      // 
      this.$http({
          method: "post",
          url: "http://47.106.237.228:10003/api/gouwuche",
          headers: {
            "X-Requested-With": "XMLHttpRequest"
          },
          // qs把json变表单
          data: qs.stringify({
            id: this.goods.productId,
            productName: this.goods.productName,
            count: 1,
            salePrice: this.goods.salePrice
          })
        })
        .then(res => {
          //console.log(res.data);
          // alert(res);
        })
        .catch(err => {
          console.log(err);
        });

      // 
    },
  }
}
</script>

<style lang="scss" scoped>
.good-img {
  display: flex;
  justify-content: center;

  a {
    display: block;

    img {
      margin: 50px auto 10px;
      width: 206px;
      height: 206px;
      display: block;
    }
  }
}

.good-price {
  margin: 15px 0;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #d44d44;
  font-family: Arial;
  font-size: 18px;
  font-weight: 700;
  display: flex;
  justify-content: space-around;
  padding-bottom: 60px;

  a {
    margin-right: 5px;
  }

  .ds {
    display: none;
  }
}

.good-price:hover .ds {
  display: block;
}

.good-title {
  line-height: 1.2;
  font-size: 16px;
  color: #424242;
  margin: 0 auto;
  padding: 0 14px;
  text-align: center;
  overflow: hidden;
}

h3 {
  text-align: center;
  line-height: 1.2;
  font-size: 12px;
  color: #d0d0d0;
  padding: 10px;
}

.good-item {
  background: #fff;
  width: 25%;
  transition: all 0.5s;
  height: 410px;

  &:hover {
    transform: translateY(-3px);
    box-shadow: 1px 1px 20px #999;

    .good-price p {
      display: none;
    }

    .ds {
      display: flex;
    }
  }
}

.el-card {
  border: none;
}
</style>
